import { tab } from "../__use/dom";

/** 交互组件 enterInteractive 的默认值，默认 3
 * 
 * 0. 不做任何交互
 * 1. 做交互，交互失败不做任何交互
 * 2. 做不交互
 * 3. 做交互，交互失败做不交互
 * @type {'0' | '1' | '2' | '3'}
 */
export let defaultEnterInteractive = 3;
/** 一般用于 Form 表单组件，在 pc 端按回车键相当于点击该组件需要做交互动作
 * 
 * 例如 radio/checkbox 应该选中，input 应该完成输入
 * 
 * 交互后可以相当于按 tab 键以聚焦下一个输入组件，或者任然停留聚焦在当前组件
 * 
 * @example
 * <template>
 *   <input @keyboard.enter.prevent="_enter" />
 * </template>
 */
export default {
  emits: {
    /** 按回车键时，默认交互完成后触发
     * @param {KeyboardEvent} e - 事件参数
     * @param {*} i - 组件实例
     */
    onEnter: (e, i) => true,
  },
  props: {
    /** 按回车是否启用交互效果
     * 
     * 可以通过全局变量 defaultEnterInteractive 进行修改默认值，默认值为 true
     * 
     * @example
     * import { defaultEnterInteractive } from '@/__mixin/enter'
     * defaultEnterInteractive = 0;
     */
    enterInteractive: {
      type: [Boolean, Number, String],
      default: () => defaultEnterInteractive
    },
  },
  methods: {
    /** 回车事件处理函数
     * @param {KeyboardEvent} e 
     */
    _enter(e) {
      const i = this.enterInteractive;
      let non = i & 2 != 0;
      if (i & 1 != 0) {
        if (this._interactive(e))
          non = false;
      }
      if (non)
        this._nonInteractive(e);
      this.$emit("enter", e, this);
    },
    /** 按回车需要交互的操作，默认为模拟 tab 键
     * @param {KeyboardEvent} e 
     * @returns {boolean | HTMLElement} 是否交互成功，若交互失败则会进入_nonInteractive，默认返回下个成功聚焦的元素
     */
    _interactive(e) {
      return tab();
    },
    /** 按回车不需要交互的操作，默认为让当前有焦点的元素取消焦点
     * @param {KeyboardEvent} e 
     */
    _nonInteractive(e) {
      document.querySelector(':focus')?.blur?.();
    },
  }
}